<?php
/**
 *
 * PHP versions 4 and 5
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright 2005-2009, Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright 2005-2009, Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       cake
 * @subpackage    cake.cake.console.libs.templates.skel.views.layouts
 * @since         CakePHP(tm) v 0.10.0.1076
 * @license       MIT License (http://www.opensource.org/licenses/mit-license.php)
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<?php echo $this->Html->charset(); ?>
	<title>
		<?php __('CakePHP: the rapid development php framework:'); ?>
		<?php echo $title_for_layout; ?>
	</title>
        <style type="text/css" media="screen">@import "<?= $this->Html->url('/css/jqtouch.css') ?>";</style>
        <style type="text/css" media="screen">@import "<?= $this->Html->url('/css/themes/jqt/thme.min.css') ?>";</style>
	<?php
		echo $this->Html->meta('icon');

		//echo $this->Html->css('cake.generic');
		//echo $this->Html->css('default');
        echo $this->Html->script(array('jquery-1.4.2.min', 'jqtouch.min'));

		echo $scripts_for_layout;
	?>
        <script type="text/javascript" charset="utf-8">
            var jQT = $.jQTouch({
                icon: 'icon.png',
                startupScreen: 'startup.png'
            });
        </script>
</head>
<body>
        <div id="about" class="selectable">
                <p><img src="jqtouch.png" /></p>
                <p><strong>jQTouch</strong><br />Version 1.0 beta<br />
                    <a href="http://www.davidkaneda.com">By David Kaneda</a></p>
                <p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p>
                <p>
                    <a href="http://twitter.com/jqtouch" target="_blank">@jQTouch on Twitter</a>
                </p>
                <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
        </div>
        <div id="ajax">
            <div class="toolbar">
                <h1>AJAX</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <ul class="rounded">
                <li class="arrow"><a href="#ajax_post">POST Form Example</a></li>
                <li class="arrow"><a href="ajax.html">GET Example</a></li>
                <li class="arrow"><a href="#callback">With Callback</a></li>
            </ul>
        </div>
        <div id="animations">
            <div class="toolbar">
                <h1>Animations</h1>
                <a class="back" href="#">Home</a>
            </div>
            <ul class="rounded">
                <li><a href="#animdemo">Slide</a></li>
                <li><a class="slideup" href="#animdemo">Slide Up</a></li>
                <li><a class="dissolve" href="#animdemo">Dissolve</a></li>
                <li><a class="fade" href="#animdemo">Fade</a></li>
                <li><a class="flip" href="#animdemo">Flip</a></li>
                <li><a class="pop" href="#animdemo">Pop</a></li>
                <li><a class="swap" href="#animdemo">Swap</a></li>
                <li><a class="cube" href="#animdemo">Cube</a></li>
            </ul>
            <div class="info">
                Custom animations are also <a href="http://code.google.com/p/jqtouch/wiki/Animations" target="_blank">easy to write</a>. <br />View the source in <code>demos/customanimation</code> to see how.
            </div>
        </div>
        <div id="animdemo">
            <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
                Pretty smooth, eh?            
            </div>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
        </div>
        <div id="callback">
            <div class="toolbar">
                <h1>AJAX w/Callback</h1>
                <a class="back" href="#">Ajax</a>
            </div>
        </div>
        <div id="callbacks">
            <div class="toolbar">
                <h1>Events</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <ul class="rounded">
                <li><a href="#pageevents">Page events</a></li>
                <li id="swipeme">Swipe me!</li>
                <li id="orient">Orientation: <strong>profile</strong></li>
            </ul>
        </div>
        <div id="demos">
            <div class="toolbar">
                <h1>Demos</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <div class="info">
                These apps open in a new window. Don&#8217;t forget to save them to your home screen to enable full-screen mode.
            </div>
            <ul class="rounded">
                <li class="forward"><a target="_webapp" href="../todo/">To-Do app</a></li>
                <li class="forward"><a target="_webapp" href="../clock/">Clock app</a></li>
            </ul>
        </div>
        <div id="edge">
            <div class="toolbar">
                <h1>Edge to Edge</h1>
                <a href="#" class="back">Back</a>
            </div>
            <ul class="edgetoedge">
                <li class="sep">F</li>
                <li><a href="#">Flintstone, <em>Fred</em></a></li>
                <li><a href="#">Flintstone, <em>Pebble</em></a></li>
                <li><a href="#">Flintstone, <em>Wilma</em></a></li>
                <li class="sep">J</li>
                <li><a href="#">Jetson, <em>Elroy</em></a></li>
                <li><a href="#">Jetson, <em>George</em></a></li>
                <li><a href="#">Jetson, <em>Jane</em></a></li>
                <li><a href="#">Jetson, <em>Judy</em></a></li>
                <li class="sep">R</li>
                <li><a href="#">Rubble, <em>Bambam</em></a></li>
                <li><a href="#">Rubble, <em>Barney</em></a></li>
                <li><a href="#">Rubble, <em>Betty</em></a></li>
            </ul>
        </div>
        <div id="extensions">
            <div class="toolbar">
                <h1>Extensions</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <div class="info">
                These apps open in a new window. Don&#8217;t forget to save them to your home screen to enable full-screen mode.
            </div>
            <ul class="rounded">
                <li class="forward"><a target="_webapp" href="../ext_location/">Geo Location</a></li>
                <li class="forward"><a target="_webapp" href="../ext_offline/">Offline Utility</a></li>
                <li class="forward"><a target="_webapp" href="../ext_floaty/">Floaty Bar</a></li>
                <li class="forward"><a target="_webapp" href="../ext_autotitles/">Auto Titles</a></li>
            </ul>
        </div>
        <div id="forms">
            <div class="toolbar">
                <h1>Forms</h1>
                <a href="#" class="back">Back</a>
            </div>
            <form>
                <ul class="edit rounded">
                    <li><input type="text" name="name" placeholder="Text" id="some_name" /></li>
                    <li><input type="text" name="search" placeholder="Search" id="some_name" /></li>
                    <li><input type="text" name="phone" placeholder="Phone" id="some_name"  /></li>
                    <li><input type="text" name="zip" placeholder="Numbers" id="some_name" /></li>
                    <li><textarea placeholder="Textarea" ></textarea></li>
                    <li>Sample Toggle <span class="toggle"><input type="checkbox" /></span></li>
                    <li>
                        <select id="lol">
                            <optgroup label="Swedish Cars">
                                <option value ="volvo">Volvo</option>
                                <option value ="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value ="mercedes">Mercedes</option>
                                <option value ="audi">Audi</option>
                            </optgroup>
                        </select>
                    </li>
                    <li><input type="password" name="some_name" value="iphonedelcopon" id="some_name" /></li>
                    <li><input type="checkbox" name="some_name" value="Hello" id="some_name" title="V8 Engine Type" /></li>
                    <li><input type="checkbox" name="some_name" value="Hello" checked="checked" id="some_name" title="V12 Engine Type" /></li>
                    <li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only cars" /></li>
                    <li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only motorbikes" /></li>
                </ul>
            </form>
        </div>
        <div id="home" class="current">
            <div class="toolbar">
                <h1>jQTouch</h1>
                <a class="button slideup" id="infoButton" href="#about">About</a>
            </div>
            <ul class="rounded">
                <li class="arrow"><a href="#ui">User Interface</a> <small class="counter">4</small></li>
                <li class="arrow"><a href="#animations">Animations</a> <small class="counter">8</small></li>
                <li class="arrow"><a href="#ajax">AJAX</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#callbacks">Callback Events</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#extensions">Extensions</a> <small class="counter">4</small></li>
                <li class="arrow"><a href="#demos">Demos</a> <small class="counter">2</small></li>
            </ul>
            <h2>External Links</h2>
            <ul class="rounded">
                <li class="forward"><a href="http://www.jqtouch.com/" target="_blank">Homepage</a></li>
                <li class="forward"><a href="http://www.twitter.com/jqtouch" target="_blank">Twitter</a></li>
                <li class="forward"><a href="http://code.google.com/p/jqtouch/w/list" target="_blank">Google Code</a></li>
            </ul>
            <ul class="individual">
                <li><a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#100;&#107;&#064;&#109;&#111;&#114;&#102;&#117;&#110;&#107;&#046;&#099;&#111;&#109;" target="_blank">Email</a></li>
                <li><a href="http://tinyurl.com/support-jqt" target="_blank">Donate</a></li>
            </ul>
            <div class="info">
                <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
            </div>
        </div>
        <div id="metal">
            <div class="toolbar">
                <h1>Metal Lists</h1>
                <a href="#" class="back">Back</a>
            </div>
            <ul class="metal">
                <li class="arrow"><a href="#"><small>AM</small> 9:40 <em>Buenos Aires</em></a></li>
                <li class="arrow"><a href="#"><small>PM</small> 19:40 <em>Singapur</em></a></li>
                <li class="arrow"><a href="#"><small>PM</small> 22:40 <em>Japan</em></a></li>
                <li class="arrow"><a href="#"><small>PM</small> 11:40 <em>New York</em></a></li>
                <li class="arrow"><a href="#"><small>PM</small> 9:40 <em>Ontario</em></a></li>
            </ul>
        </div>
        <div id="pageevents">
            <div class="toolbar">
                <h1>Page Events</h1>
                <a class="back" href="#">Events</a>
            </div>
            <div class="info" style="font-weight: normal;">
            </div>
        </div>
        <div id="plastic">
            <div class="toolbar">
                <h1>Plastic Lists</h1>
                <a href="#" class="back">Back</a>
            </div>
            <ul class="plastic">
                <li class="arrow"><a href="#">Simple list</a></li>
                <li class="arrow"><a href="#">Contact list</a></li>
                <li class="arrow"><a href="#">Content List</a></li>
                <li class="arrow"><a href="#">Metal list</a></li>
            </ul>
            <div class="info">
                <p><strong>Best enjoyed on a real iPhone</strong></p>
            </div>
        </div>
        <div id="ui">
            <div class="toolbar">
                <h1>UI Demos</h1>
                <a class="back" href="#">Home</a>
            </div>

            <h2>Lists</h2>
            <ul class="rounded">
                <li class="arrow"><a href="#edge">Edge to Edge</a></li>
                <li class="arrow"><a href="#plastic">Plastic</a></li>
                <li class="arrow"><a href="#metal">Metal</a></li>
            </ul>
            <h2>Forms</h2>
            <ul class="rounded">
                <li class="arrow"><a href="#forms">Forms</a></li>
            </ul>
        </div>

        <form id="ajax_post" action="ajax_post.php" method="POST" class="form">
            <div class="toolbar">
                <h1>Post Demo</h1>
                <a class="back" href="#">Ajax</a>
            </div>
            <ul class="rounded">
                <li><input type="text" name="zip" value="" placeholder="Zip Code" /></li>
            </ul>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
        </form>
        <div id="home" selected="true" class="edgetoedge form">
            <div class="toolbar">
                <h1>Todos</h1>
                <a href="#add" class="btn2 slideup">Add</a>
            </div>
            <form>
            <ul class="incomplete">
                <li><input type="checkbox" /> <span>Do something</span> <small><a href="#">Blah</a></small></li>
                <li><input type="checkbox" /> <span>Do something else</span></li>
                <li><input type="checkbox" /> <span>Finish these damn demos</span></li>
            </ul>
            <h4>Completed</h4>
            <ul class="complete">
                <li><input type="checkbox" checked /> <span>Do something</span></li>
                <li><input type="checkbox" checked /> <span>Write eblast</span></li>
            </ul>
            </form>
        </div>
		<div class="toolbar">
			<h1>Cake-Tweet</h1>
		</div>
        <div id="session_info" selected="true">
        <?php 
            if ($session->check('TwitterToken.access')) {
                $profile_image_url  = $session->read('TwitterAccount.profile_image_url');
                $name = $session->read('TwitterAccount.name');
                $screen_name = $session->read('TwitterAccount.screen_name');
                echo $html->image($profile_image_url);
                echo $name . '(' . $screen_name . ')';
                echo ' ';

                $menus = array();
                $menus[] = $html->link(__('Home', true), array('controller'=>'tweets', 'action'=>'tweets', 'mobile'=>true));
                $menus[] = $html->link(__('@'.$screen_name, true), array('controller'=>'tweets', 'action'=>'replies', 'mobile'=>true));
                $menus[] = $html->link(__('DM', true), array('controller'=>'tweets', 'action'=>'inbox', 'mobile'=>true));
                $menus[] = $html->link(__('Rate Limit Status', true), array('controller'=>'tweets', 'action'=>'rate_limit_status', 'mobile'=>true));
                $menus[] = $html->link(__('Logout', true), array('controller'=>'tweets', 'action'=>'logout', 'mobile'=>true));

		echo join(' | ', $menus);
            } else {
                echo $html->link(__('Login', true), array('controller'=>'tweets', 'action'=>'login'));
            }
        ?>
        </div>
	<div id="container" class="panel" selected="true">
		<div id="content">

			<?php echo $this->Session->flash(); ?>

			<?php echo $content_for_layout; ?>

		</div>
		<div id="footer">
			<?php echo $this->Html->link(
					$this->Html->image('cake.power.gif', array('alt'=> __('CakePHP: the rapid development php framework', true), 'border' => '0')),
					'http://www.cakephp.org/',
					array('target' => '_blank', 'escape' => false)
				);
			?>
		</div>
	</div>
	<?php echo $this->element('sql_dump'); ?>
</body>
</html>

